<template>
  <div class="home-container" v-loading="loading">
    <el-row class="row-bg" :gutter="10">
      <el-col :xs="24" :sm="12" :lg="8">
        <el-card class="box-card" style="height: 100%">
          <div class="personal">
            <div class="personList">
              <span>
                <svg-icon icon-class="project-name" style="margin-right: 4px" />
                {{ projectInfo.projectBrief }}:
              </span>
              <div>
                <el-button
                  size="small"
                  type="success"
                  icon="Position"
                  @click="gotoContract(projectInfo)"
                >
                  合同管理
                </el-button>
                <el-button
                  size="small"
                  type="primary"
                  icon="Edit"
                  @click="openProjectInfo"
                  v-if="projectInfo.isAdmin"
                >
                  编辑
                </el-button>
              </div>
            </div>
            <div>名称：{{ projectInfo.projectName }}({{ projectInfo.projectNumber }}) </div>
            <el-descriptions :column="2">
              <el-descriptions-item label="类型:">
                {{ projectInfo.projectType }}
              </el-descriptions-item>
              <el-descriptions-item label="客户:">
                {{ projectInfo.clientName }}
              </el-descriptions-item>
              <el-descriptions-item label="负责人:">
                {{ projectInfo.chargeNickname }}
              </el-descriptions-item>
              <el-descriptions-item label="项目金额:">
                <span style="font-weight: 600; font-size: 16px">
                  {{ numberFormat(projectInfo.estimatePrice) }}元
                </span>
              </el-descriptions-item>
              <el-descriptions-item label="启动天数:">
                {{ projectInfo.dayNumber }}天
              </el-descriptions-item>
              <el-descriptions-item label="实际状态:">
                <span style="font-weight: 600; font-size: 16px">
                  {{ projectInfo.actualStatus }}
                </span>
              </el-descriptions-item>
            </el-descriptions>
            <el-divider></el-divider>
            <div class="personList">
              <span>
                <svg-icon icon-class="people-list" style="margin-right: 4px" />
                参与人员：
              </span>
              <el-button
                size="small"
                type="primary"
                icon="Plus"
                @click="addParticipants"
                v-if="projectInfo.isAdmin"
              >
                添加
              </el-button>
            </div>
            <el-row>
              <el-col :span="12" v-for="(item, index) in projectInfo.userProjectList" :key="index">
                <div style="display: flex; align-items: center; margin-bottom: 12px">
                  <el-icon style="font-size: 24px; color: #333; margin-right: 6px">
                    <user />
                  </el-icon>
                  <span>{{ item.nickname }} - {{ item.role }}</span>
                </div>
              </el-col>
            </el-row>
            <el-divider></el-divider>
            <div class="personList">
              <span>
                <svg-icon icon-class="people-list" style="margin-right: 4px" />
                联系人：
              </span>
              <el-button size="small" type="primary" icon="Plus" @click="addContact"
                >添加</el-button
              >
            </div>
            <div style="display: flex; flex-wrap: wrap">
              <el-table :data="projectInfo.projectContactList" stripe style="width: 100%">
                <el-table-column prop="contactName" label="姓名" />
                <el-table-column prop="title" label="职务" />
                <el-table-column prop="phone" label="电话" width="120" />
                <el-table-column fixed="right" label="操作" width="110">
                  <template #default="scope">
                    <el-button
                      link
                      type="primary"
                      size="large"
                      @click="openProjectContact(scope.row)"
                    >
                      详情
                    </el-button>
                    <el-button
                      link
                      type="primary"
                      size="large"
                      @click="delProjectContact(scope.row.id)"
                    >
                      删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <el-divider></el-divider>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="16">
        <el-card class="box-card">
          <el-steps :active="projectInfo.statusNumber" finish-status="success">
            <el-step
              v-for="(item, index) in projectInfo.status"
              :key="index"
              :title="item.name"
              :description="item?.time"
            />
          </el-steps>
        </el-card>
        <el-card class="box-card">
          <div style="display: flex; justify-content: space-between">
            <el-button type="primary" @click="openNextStageDrawer(1)">1.项目启动</el-button>
            <el-button type="primary" @click="openNextStageDrawer(2)">2.确定代理</el-button>
            <el-button type="primary" @click="openNextStageDrawer(3)">3.确定挂网</el-button>
            <el-button type="primary" @click="openNextStageDrawer(4)">4.中标/流标</el-button>
            <el-button type="primary" @click="openNextStageDrawer(5)">5.确认签约</el-button>
            <el-button type="primary" @click="openNextStageDrawer(6)">6.完成验收</el-button>
            <el-button type="primary" @click="openNextStageDrawer(7)">7.项目完成</el-button>
          </div>
        </el-card>
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>
                <svg-icon
                  icon-class="folder"
                  style="margin-right: 2px; width: 18px; height: 18px"
                />
                项目文档：
              </span>
              <el-button type="primary" icon="Plus" @click="openUploadFile()">添加文档</el-button>
            </div>
          </template>
          <div style="display: flex; flex-wrap: wrap">
            <el-card
              shadow="hover"
              class="file-card"
              v-for="(item, index) in fileList"
              :key="index"
            >
              <template #header>
                <div class="card-header">
                  <div style="display: flex; align-items: center">
                    <span style="font-size: 16px; font-weight: 800">
                      <svg-icon :icon-class="iconList[index]" style="margin-right: 4px" />
                      {{ item.state }}
                    </span>
                    <el-tag
                      size="small"
                      type="primary"
                      effect="dark"
                      round
                      style="margin-left: 6px"
                    >
                      {{ item.fileCount }}
                    </el-tag>
                  </div>
                  <div style="position: relative; right: 0px; float: right">
                    <el-button
                      size="small"
                      type="primary"
                      icon="View"
                      @click="uploadFile(item, index, item.state)"
                    >
                      详情
                    </el-button>
                  </div>
                </div>
              </template>
              <div class="content-text" style="display: flex">
                <div>
                  <div
                    v-for="(ite, index) in item.mapFiles"
                    :key="index"
                    style="width: auto; text-align: right"
                  >
                    <span style="min-width: 80px; line-height: 1.8em">{{ ite.name }}：</span>
                  </div>
                </div>
                <div>
                  <div v-for="(ite, index) in item.mapFiles" :key="index">
                    <span style="line-height: 1.8em">
                      <el-tag
                        size="small"
                        type="primary"
                        effect="dark"
                        round
                        style="margin-left: 6px"
                      >
                        {{ ite.num }}
                      </el-tag>
                    </span>
                  </div>
                </div>
              </div>
            </el-card>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div>
      <AddContactDrawer ref="addContactDrawer" @getData="getData" />
      <ProjectContactDrawer ref="projectContactDrawer" />
      <AddParticipantsDrawer ref="addParticipantsDrawer" @getData="getData" />
      <FileListDrawer ref="fileListDrawer" @getData="getData" />
      <ProjectInfoDrawer ref="projectInfoDrawer" @getData="getData" />
      <UploadFileDrawer ref="uploadFileDrawer" @getData="getData" />
      <NextStageDrawer ref="nextStageDrawer" @getData="getData" />
    </div>
  </div>
</template>
<script setup lang="ts">
  import { User } from '@element-plus/icons-vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { ref, onMounted } from 'vue'
  import { numberFormat } from '@/utils/numberFormat.ts'
  import { getProjectById } from '@/api/controller/project-controller/index'
  import { deleteContactById } from '@/api/controller/project-contact-controller/index'
  import { getFileDetailProjectByProjectNumber } from '@/api/controller/file-detail-controller/index'
  import AddContactDrawer from './components/addContactDrawer.vue'
  import AddParticipantsDrawer from './components/addParticipantsDrawer.vue'
  import FileListDrawer from './components/fileListDrawer.vue'
  import ProjectInfoDrawer from './components/projectInfoDrawer.vue'
  import UploadFileDrawer from './components/uploadFileDrawer.vue'
  import NextStageDrawer from './components/nextStageDrawer.vue'
  import ProjectContactDrawer from './components/projectContactInfoDrawer.vue'
  import { useTagsViewStore } from '@/store/modules/tagsView'
  import { useRouter } from 'vue-router'
  import { usePermissionStore } from '@/store/modules/permission'
  const PermissionStore = usePermissionStore()
  const iconList = ref([
    'communicate',
    'tendering',
    'construction',
    'completed',
    'contact-name',
    'other-file',
  ])
  const router = useRouter()
  const projectInfo = ref<any>({})
  const fileList = ref([])
  const loading = ref(true)
  const TagsViewStore = useTagsViewStore()
  const projectId = ref(history.state?.id)
  onMounted(async () => {
    TagsViewStore.setHistory(history.state)
    await getData()
  })

  const gotoContract = (projectInfo) => {
    PermissionStore.setCacheFlag(false)
    setTimeout(() => {
      router.push({
        name: 'contract',
        state: { projectNumber: projectInfo.projectNumber, id: projectInfo.id },
      })
    }, 100)
  }
  //获取数据
  const getData = async () => {
    try {
      loading.value = true
      let res = await getProjectById({ id: projectId.value })
      projectInfo.value = res.data
      res = await getFileDetailProjectByProjectNumber({
        projectNumber: projectInfo.value.projectNumber,
      })
      fileList.value = res.data
    } finally {
      loading.value = false
    }
  }
  //联系人抽屉
  const addContactDrawer = ref()
  const addContact = () => {
    addContactDrawer.value.show(projectInfo.value.projectNumber)
  }
  const delProjectContact = (id) => {
    ElMessageBox.confirm('确认删除？', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(async () => {
      let data = { id: id }
      const res = await deleteContactById(data, { loading: true })
      if (res.code === 200) {
        ElMessage.success('删除成功')
        getData()
      }
    })
  }
  //参与人员抽屉
  const addParticipantsDrawer = ref()
  const addParticipants = () => {
    addParticipantsDrawer.value.show(projectId.value)
  }

  //文件列表抽屉
  const fileListDrawer = ref()
  const uploadFile = (data, index, stage) => {
    fileListDrawer.value.show(data, index, projectInfo.value.projectNumber, stage)
  }
  //编辑项目信息抽屉
  const projectInfoDrawer = ref()
  const openProjectInfo = () => {
    projectInfoDrawer.value.show(projectInfo.value)
  }

  //文件上传抽屉
  const uploadFileDrawer = ref()
  const openUploadFile = () => {
    uploadFileDrawer.value.show(projectInfo.value.projectNumber)
  }
  //下一阶段
  const nextStageDrawer = ref()
  const openNextStageDrawer = (statusNumber) => {
    nextStageDrawer.value.show(projectInfo.value.id, statusNumber, projectInfo.value.projectNumber)
  }
  //联系人详情
  const projectContactDrawer = ref()
  const openProjectContact = (data) => {
    projectContactDrawer.value.show(data)
  }
</script>

<style scoped lang="scss">
  .personal {
    .info {
      font-size: 14px;
      font-weight: 700;
    }
    .list {
      line-height: 30px;
      text-align: left;
    }
    .personList {
      margin-bottom: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        font-size: 14px;
        font-weight: 700;
      }
    }
  }
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      font-size: 14px;
      font-weight: 700;
    }
  }

  .text {
    font-size: 14px;
  }
  .grid-content {
    display: flex;
    .left {
      width: 40%;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #2d8cf0;
    }
    .right {
      display: flex;
      flex-direction: column;
      padding-left: 20px;
      justify-content: center;
      .h2 {
        font-size: 24px !important;
        margin-bottom: 10px;
      }
      .foot {
        font-size: 18px;
        margin-left: 6px;
      }
    }
  }
  .custom {
    :deep(.el-card__body) {
      padding: 0;
    }
  }
  .item {
    margin-bottom: 18px;
  }

  .box-card {
    //height: 100%;
    position: relative;
    margin-bottom: 10px;
    width: 100%;
    .file-card {
      min-width: 30%;
      flex: 1;
      margin-right: 8px;
      margin-bottom: 8px;
      .fileCard-content {
        display: flex;
        justify-content: space-around;
        align-items: center;
        .infoItem {
          display: flex;
          flex-direction: column;
          .content-text {
            margin-top: 6px;
          }
        }
      }
    }
  }
  .card-item {
    background: linear-gradient(50deg, #1890ff, #77e19d);
  }
  .home-container {
    width: 100%;
    height: 100%;
    display: flex;
    padding: 16px;
    box-sizing: border-box;
    font-size: 14px;
  }
  .footer {
    display: flex;
    justify-content: space-between;
    .footer-text {
      margin-left: 0px;
    }
    .item-child {
      flex: 1;
      padding: 8px 0;
      color: #7f7f7f;
      position: relative;
      cursor: pointer;
      font-size: 12px;
    }
    .item-child:after {
      position: absolute;
      right: 0;
      content: '';
      display: block;
      height: 20px;
      border-right: 1px solid #e4e7ed;
    }
    .item-child:last-child:after {
      display: none;
    }
  }
  :deep(.el-card__header) {
    padding: 14px;
  }
  :deep(.el-card__footer) {
    padding: 6px;
  }
</style>
